<!--
 * @Description: 
 * @Version: 1.0
 * @Author: AaroLi
 * @Date: 2024-08-14 16:59:40
 * @LastEditors: AaroLi
 * @LastEditTime: 2024-08-14 17:00:32
-->
<template>
  <Card :tab-list="tabListTitle" v-bind="$attrs" :active-tab-key="activeKey" @tab-change="onTabChange">
    <template #extra>
      <div class="title">招标方式统计</div>
    </template>
    <p v-if="activeKey === 'tab1'">
      <VisitAnalysisBar :type="'1'" />
    </p>
    <p v-if="activeKey === 'tab2'">
      <VisitAnalysisBar :type="'2'" />
    </p>
    <p v-if="activeKey === 'tab3'">
      <VisitAnalysisBar :type="'3'" />
    </p>
  </Card>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { Card } from 'ant-design-vue';
  import VisitAnalysisBar from './VisitAnalysisBarFs.vue';

  const activeKey = ref('tab1');

  const tabListTitle = [
    {
      key: 'tab1',
      tab: '月',
    },
    {
      key: 'tab2',
      tab: '年',
    },
    {
      key: 'tab3',
      tab: '累计',
    },
  ];

  function onTabChange(key) {
    activeKey.value = key;
  }
</script>
<style lang="less" scoped>
  .title {
    position: absolute;
    width: 200px;
    font-size: 20px;
    left: 50%;
    top: 30px;
    transform: translateX(-50%);
    text-align: center;
    font-weight: bold;
  }
</style>
